<template>
  <div class="coupon-container">
    <p>
      <v-btn @click="userGet">获取优惠券1</v-btn>
    </p>
    <div class="coupon-box" v-for="item in coupons" :key="item.id">
      <GoodCoupon
        :id="item.id"
        :money="item.value"
        :info="item.info"
        :name="item.name"
        :startTime="item.effectiveTime"
        :endTime="item.expirationTime"
      >
        <router-link to="/home"> 使用 </router-link>
      </GoodCoupon>
    </div>
  </div>
</template>

<script>
import { getCouponApi, userGetCoupon } from '@/api/coupon'
import GoodCoupon from '@/components/goods/GoodCoupon.vue'
export default {
  components: {
    GoodCoupon
  },
  data() {
    return {
      coupons: [
        // {
        //   id: 1,
        //   money: 10,
        //   info: '新客专享',
        //   name: '店铺优惠券',
        //   startTime: '2022.10.9 8:00',
        //   endTime: '2023.10.9 23:59'
        // },
        // {
        //   id: 2,
        //   money: 10,
        //   info: '新客专享',
        //   name: '店铺优惠券',
        //   startTime: '2022.10.9 8:00',
        //   endTime: '2023.10.9 23:59'
        // },
        // {
        //   id: 3,
        //   money: 10,
        //   info: '新客专享',
        //   name: '店铺优惠券',
        //   startTime: '2022.10.9 8:00',
        //   endTime: '2023.10.9 23:59'
        // },
        // {
        //   id: 4,
        //   money: 10,
        //   info: '新客专享',
        //   name: '店铺优惠券',
        //   startTime: '2022.10.9 8:00',
        //   endTime: '2023.10.9 23:59'
        // }
      ]
    }
  },
  created() {
    this.init()
  },
  methods: {
    async userGet() {
      userGetCoupon({
        userId: JSON.parse(sessionStorage.getItem('user')),
        couponId: '1668979748763086849'
      }).then((res) => {
        console.log(res)
      })
    },
    async init() {
      const token = sessionStorage.getItem('token')
      // console.log(token)
      await getCouponApi(token).then((res) => {
        this.coupons = res.data.data
        console.log(res)
      })
      // console.log(this.coupons)
    }
  }
}
</script>

<style lang="less" scoped>
.coupon-container {
  display: block;
  margin-left: 256px;
  margin-top: 50px;
  .coupon-box {
    display: inline-block;
    // width: 80%;
    margin-left: 50px;
    margin-bottom: 40px;
  }
}
</style>
